<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告  不推荐-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <!--    引入本地的vue.js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
     快速构建vue环境：
     每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
     步骤:
        1. 创建vue实例
        2. 初始化容器
        3. 绑定容器和实例  挂载
-->
<!-- 初始化容器  容器中的标签渲染交给vue实例-->

<div id="app">
    <h2>Hi Vue2</h2>
</div>

<div class="app">
    <h2>Hi Vue</h2>
</div>

<script>
    /*
    * template :  需要vue渲染的模板
    *     注意:
    *          1.  模板必须要有一个根本标签
    *          2. 模板的内容会覆盖容器中的原始内容
    *          3.  模板在编写时可以使用字符串也可以使用字符串模板， 使用字符串在渲染的内容比较多时 会出现字符串拼接的现象，
    *              页面结构不好维护，建议使用模板字符串的形式进行编写
    *
    * */
    // 创建vue实例
    let vm = new Vue({
        template: `<div>
                        <h2>hello vue</h2>
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </div>`
    })

    //vue实例和容器的关系  挂载
    // vm.$mount(document.getElementById('app'))
    /*
    *   容器和vue实例的关系
    *    1. 一个vue实例可以渲染多个容器吗？  不可以   一个实例只能和一个容器绑定
    *    2. 一个容器可以被多个vue实例绑定吗？ 不可以   一个容器只能被一个实例绑定
    *    结论:   容器和实例之间是一对一的关系
    *
    * */
    vm.$mount('#app')

    // let vm2 = new Vue({
    //     template: `<div>
    //                     <h2>Hi vue2</h2>
    //                     <ul>
    //                         <li>4</li>
    //                         <li>5</li>
    //                         <li>6</li>
    //                     </ul>
    //                 </div>`
    // })
    // vm2.$mount('#app')

</script>

</body>
</html>